import React, { Component } from 'react'
import { Carousel } from 'antd';
import { list } from "../api/index"
export default class Tab1 extends Component {
    state = {
        list: [],
    }
    componentDidMount() {
        this.getlist();
        // console.log('this.list', this.list)
      }
    
      getlist = () => {
        list().then(res => {
          // console.log(res)
          this.setState({
            list: res.data.data,
          })
        })
      }

    //科普详情页1
    listDetail = (item) => {
        this.props.history.push({
            pathname: "/listDetail",
            params: item,
        })
    }

    render() {
        const contentStyle = {
            height: '160px',
            color: '#fff',
            lineHeight: '160px',
            textAlign: 'center',
            background: '#364d79',
        };
        // console.log('this.props',this.props)
        const { list } = this.state;

        return (
            <div className='tab1'>
                <div className="swiper">
                    <Carousel autoplay>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://img1.baidu.com/it/u=3443896827,3952603472&fm=26&fmt=auto" alt="" />
                            </h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://img2.baidu.com/it/u=4197162429,2419939361&fm=26&fmt=auto" alt="" />
                            </h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://img1.baidu.com/it/u=2564830932,1986794290&fm=26&fmt=auto" alt="" />
                            </h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://img2.baidu.com/it/u=2254188701,678351681&fm=26&fmt=auto" alt="" />
                            </h3>
                        </div>
                    </Carousel>
                </div>
                <div className="listlist">
                    {
                        list ? list.map((item, index) => {
                            return <dl key={index} onClick={() => this.listDetail(item)}>
                                <dt>
                                    <img src={item.img} alt='' />

                                </dt>
                                <dd>
                                    <p>{item.title}</p>
                                    <p>
                                        <span>{item.type}</span>
                                        <span>{item.time}</span>
                                        <span>阅读 98</span>
                                        <span>赞 39</span>
                                    </p>
                                </dd>
                            </dl>
                        }) : null
                    }
                </div>
            </div>
        )
    }
}
